<template>
  <div class="abnormaReminder">
    <div class="title-big">异常提醒</div>
    <div class="com-title">提醒方式一：微信公众号提醒 <span>主账号订阅的微信会收到所有企微号的异常提醒；子账号订阅的微信只会收到自己权限范围内的企微号异常提醒</span></div>
    <div class="checkbox-big">
      <el-checkbox v-model="checked">
        <div class="check-title">企微号掉线提醒</div>
         <div class="check-content">企微号登录状态异常，会及时收到掉线提醒。</div>
      </el-checkbox>
      <el-checkbox v-model="checked">
        <div class="check-title">席位到期提醒</div>
        <div class="check-content">订单到期前7/3/1天中午12点会收到到期提醒。</div>
      </el-checkbox>
      <el-checkbox v-model="checked">
        <div class="check-title">消息频繁提醒</div>
        <div class="check-content">累计三次检测到“消息发送过于频繁，请稍后再试”时触发，一个企微号一个自然日只发一次。</div>
      </el-checkbox>
      <el-checkbox v-model="checked">
        <div class="check-title">消息异常提醒</div>
        <div class="check-content">累计三次检测到“账号异常，消息暂无法发送，请稍后再试”时触发，一个企微号一个自然日只发一次。</div>
      </el-checkbox>
      <el-checkbox v-model="checked">
        <div class="check-title">授权过期提醒</div>
        <div class="check-content">当日有检测到“微信授权已过期，消息无法发送成功，请使用微信重新授权后再试”时触发，一个企微号一个自然日只发一次</div>
      </el-checkbox>
      <el-checkbox v-model="checked">
        <div class="check-title">好友扩容提醒</div>
        <div class="check-content">当企微号通讯录中好友个数达到4500/9000/14000时触发提醒，每日最多提醒三次。</div>
      </el-checkbox>
    </div>
    <div class="title2">以下微信号订阅了公众号通知：</div>
    <div class="subscribe">
      <div v-hasPermi="['system:catch:addgzh']" class="subscribe-title" @click="addCode"><i class="el-icon-plus"></i>添加订阅微信号</div>
      <div class="subscribe-code">
        <img src="@/assets/images/wsCode.png"/>
        <div class="subscribe-content">
          <p>微信</p>
          <span>2024-04-10 09:10:26</span>
        </div>
        <div class="operate">
          <i class="el-icon-refresh"></i>
          <i class="el-icon-delete"></i>
        </div>
      </div>
    </div>
    <div class="question">
      <div class="question-title">如何解决绑定后不显示头像和微信号？</div>
      <div class="question-li">第一步：点击“更新信息图标”获取授权二维码</div>
      <div class="question-li">第二步：用绑定的微信扫码，打开的页面左上角会显示“更新成功”</div>
      <div class="question-li">第三步：完成回到本页刷新，若头像昵称都显示说明更新成功</div>
    </div>
    <div class="com-title">提醒方式二：短信订阅</div>
    <div class="checkbox-big">
      <el-checkbox v-model="checked">
        <div class="check-title">席位到期提醒</div>
        <div class="check-content">订单到期前7/3/1天中午12点会收到到期提醒。</div>
      </el-checkbox>
    </div>
    <div class="title2">订阅手机号：</div>
    <div class="phone-big">
      <el-input v-model="value2" placeholder="请输入手机号" style="width: 200px; margin-right: 10px" size="small"></el-input>
      <el-button type="text">确认</el-button>
    </div>
    <viewFollow v-if="showViewFollow" :visableIf.sync="showViewFollow"></viewFollow>
  </div>
</template>
<script>
export default {
  name: "abnormaReminder",
  components:{
    'viewFollow':()=> import('./viewFollow.vue')
  },
  data() {
    return {
      showViewFollow:false,//
      checked:true,
      value2:null,//手机号
    }
  },
  methods:{
    addCode(){
      this.showViewFollow=true;
    }
  },
}
</script>
<style scoped lang="scss">
.abnormaReminder {
  margin: 12px 16px;
  border: 1px solid #e9e9e9;
  background: #fff;
  height: calc(100% - 32px);
  padding:15px  20px;
  overflow-y: auto;
}

.title-big {
  height: 40px;
  display: flex;
  align-items: center;

}
.checkbox-big {
  .el-checkbox {
    display: flex;
    margin-bottom: 16px;
  }
  .check-content {
    margin-top: 4px;
    font-size: 12px;
    font-weight: 400;
    color: rgba(0, 0, 0, .45);
    line-height: 20px;
  }
}
::v-deep .el-checkbox__input.is-checked + .el-checkbox__label {
  color: rgba(0, 0, 0, .65);
}
.com-title {
  position: relative;
  min-height: 40px;
  background: #f5f5f5;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  color: rgba(0, 0, 0, .85);
  line-height: 40px;
  padding: 0 12px;
  margin-bottom: 15px;
  span {
    font-weight: 400;
    color: rgba(0, 0, 0, 0.45);
  }
}
.title2 {
  font-size: 14px;
  font-weight: 600;
  color: rgba(0, 0, 0, .85);
  line-height: 22px;
  margin-bottom: 8px;
}
.subscribe {
  display: flex;
  align-items: center;
}
.subscribe-title {
  width: 300px;
  height: 64px;
  border-radius: 4px;
  border: 1px dashed #e9e9e9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 400;
  color: #3070ff;
  margin-bottom: 12px;
  margin-right: 12px;
  cursor: pointer;
}
.subscribe-code {
  position: relative;
  width: 300px;
  height: 64px;
  border-radius: 4px;
  border: 1px solid #e9e9e9;
  display: flex;
  align-items: center;
  padding: 10px 50px 10px 12px;
  margin-bottom: 12px;
  margin-right: 12px;
  img {
    width: 40px;
    height: 40px;
    object-fit: cover;
  }
  .subscribe-content {
    margin-left: 12px;
    >p{
      color: rgba(0, 0, 0, .85);
      font-size: 14px;
      line-height: 22px;
      margin: 0;
    }
    >span{
      font-size: 12px;
      color: rgba(0, 0, 0, .45);
      line-height: 20px;
    }
  }
}
.operate {
  display: flex;
  position: absolute;
  right: 10px;
  top: 10px;
  i {
    margin-left: 10px;
    cursor: pointer;
  }
}
.question-title {
  color: #2d8cf0;
}
.question {
  line-height: 25px;
  margin-bottom: 20px;
}
.phone-big {

}
</style>
